pp108 : onbeforedatabind Event

onbeforedatabind Event

  


This event is executed just before the value of a cell is written.

Syntax

Inline HTML 
<div cordysType="wcp.library.ui.XGrid" id="xgridId ()">
    <div id="columnId" onbeforedatabind="handler" ref="columnRef">columnLabel</div>
...
</div>

 

Event Information

To invoke Invoked whenever the cells of a row are rendered, such as afterbindData(), andrefresh().
Default Action Initiates any action associated with this event.

 

Event Object Properties


Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query an event object for data.

Property Description
businessObject XML node of the business object associated with the row.
className String that refers to the CSS class associated with the cell.
data XML node that is the basis for the content in the XGrid.
dataNode XML data node associated with the cell.
srcElement Refers to the HTML node of the XGrid that caused the event to be executed.
returnValue Boolean. When set to false, the event is cancelled.
title String, to link a tooltip to the cell.
value Refers to the value or cell content to be displayed in the cell.

 

Remarks

The HTML of the cells and row is not available when the onbeforedatabind event is executed. The className event property allows simple styling changes to the cell. The styling properties supported are:

  • background-color
  • color
  • cursor
  • direction
  • text (-align, -autospace, -decoration, -transform)
  • font (-family, -style, -variant, -weight)
  • letter-spacing
  • word-spacing

Example


The following example demonstrates the use of theonbeforedatabindevent. Cells with negative values in the profit column are highlighted in red color, right-aligned, and associated with a tooltip.

Also, theonchangeevent is used to change the style of a cell based on its value, such that when you change the value of the cell, its style changes accordingly.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html  onapplicationready="fillXGrid()">
<head>
   <meta content="Web Generator" name="Generator"/>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
   <title>onbeforedatabind event</title>
<script src="/cordys/wcp/application.js"></script>
<script type="cordys/xml"id="projectsXML">
    <data></data>
</script>
<script type="cordys/xml" id="newNode">
    <projects>
       <project></project>
       <description></description>
       <profit></profit>
    </projects>
</script>
<script>
var XMLNode;
/*creates sample data to fill XGrid*/
function fillXGrid()
  {
        XMLNode = cordys.cloneXMLDocument(projectsXML.XMLDocument);
        var dataNode = cordys.selectXMLNode(XMLNode,".//*[local-name()='data']");
        for (var i=1 ; i<21 ; i++ )
         {
                  var newRow = cordys.cloneXMLDocument(newNode.XMLDocument);
              cordys.setTextContent(cordys.selectXMLNode(newRow,".//*[local-name()='project']"), i)
              cordys.setTextContent(cordys.selectXMLNode(newRow,".//*[local-name()='description']"),"Project " + i);
              cordys.setTextContent( cordys.selectXMLNode(newRow,".//*[local-name()='profit']"), 1000 - Math.ceil(2000*Math.random()));
             cordys.appendXMLNode(newRow.documentElement,dataNode)           
         }
        projectGrid.bindData( XMLNode );
   }
function handleOnbeforedatabind()
   {
        checkProfit( window.application.event );
   }
function handleChange()
   {
        checkProfit( window.application.event );
   }
//value<0 link the negative css class
function checkProfit(evnt)
   {
         if ( parseInt(evnt.value)<0 )
          {
               evnt.className = "negative";
               evnt.title = "Check project";
          }   
         else
          {
               evnt.className = "positive";
          }
    }
</script>
<style>
  .negative
   {
      text-align:right;
      color:red;
   }
  .positive
   {
       text-align:right;
   }
</style>
</head>
<body>
<div cordysType="wcp.library.ui.XGrid"
                  id="projectGrid"
                  xpathRowData = "data/projects"
                  xpathBusinessObject = "."
            style="width:500;height:200">
     <div id="projectId" ref="project" width=75>Project</div>
     <div id="description" ref="description">Description</div>
     <div id="profit" ref="profit" dataType="integer"
         onbeforedatabind="handleOnbeforedatabind()"
          onchange="handleChange()">Operating Profit (EUR)</div>
</div>
</body>
</html>

See Also


xgrid